<!--
 * @Author: gyp
 * @Date: 2020-05-09 08:56:33
 * @LastEditors: gyp
 * @LastEditTime: 2020-07-01 17:31:26
 * @Description: 快警平台信息列表
 * @FilePath: \sy_kjxc_web\src\views\screen\components\policeList.vue
 -->
<template>
  <ul class="policeList">
    <li class="policeItem" v-for="(item, index) in data" :key="index" @click="onPlatformShow(item)">
      <div class="top">
        <div class="title">{{ item.parentName }}</div>
        <div>{{ item.name }}</div>
      </div>
      <div class="bot">
        <div>人数: {{ item.userNum }}</div>
        <div>{{ item.platformLeaderName ? '平台长：' + item.platformLeaderName : ''}}</div>
        <el-button size="mini" class="bt-tool"  @click.stop="onClick(item)" >查看</el-button>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'police-list',
  props: ['data'],
  methods: {
    /**
     * 点击每行的操作
     * @param {Object} row 每行的数据
     */
    onClick (row) {
      this.$emit('onPoliceOpen', row);
    },
    onPlatformShow (row) {
      this.$emit('onPlatformShow', row);
    }
  }
};
</script>
<style lang="less" scoped>
.policeList {
  .policeItem {
    padding: 10px 15px;
    border-bottom: solid 1px #2c58a6;
    color: #eee;
    font-size: 14px;
    cursor: pointer;
    &:first-of-type {
      padding: 6px 15px 8px;
    }
    .top,
    .bot {
      display: flex;
      justify-content: space-between;
    }
    .title:hover {
      color: #25f3e6;
    }
    .bot {
      margin-top: 7px;
      .bt-tool {
        background: #214682;
        border: solid 1px #2c58a6;
        color: #fda502;
        letter-spacing: 2px;
        padding: 6px 11px;
        &:hover {
          color: #fff;
        }
      }
    }
    &:hover {
      text-shadow: 0 0 3px #fff;
      box-shadow: inset 0 0 5px #2C58A6;
    }
  }
}
</style>
